<template>
  <Layout desc="封装一个右键菜单组件">
    <ul class="bg-zinc-100 cursor-pointer p-2 flex flex-col gap-2 mt-40">
      <ContextMenu
        v-for="i in 5"
        :menu="[{ label: '添加' }, { label: '编辑' }, { label: '删除' }]"
        @select="label => handleSelect(label, i)"
      >
        <li
          class="w-100 h-16 leading-16 bg-zinc-300 p-1 text-center text-white hover:bg-zinc-200"
        >
          {{ i }}
        </li>
      </ContextMenu>
    </ul>
  </Layout>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const handleSelect = (label: '添加' | '编辑' | '删除', index: number) => {
  const fnMap = {
    添加: add,
    编辑: edit,
    删除: del
  }
  fnMap[label](index)
}

const add = (i: any) => {
  ElMessage.success(`添加了${i}`)
}

const edit = (i: any) => {
  ElMessage.warning(`编辑了${i}`)
}

const del = (i: any) => {
  ElMessage.error(`删除了${i}`)
}
</script>

<style scoped lang="scss"></style>
